<template>
	<view>
		<view class="data-box">
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80"
						:model="info">
							<u-form-item
							label="所属项目"
							required
							borderBottom>
								<u--text :text="info.projectName"></u--text>
								<!-- <u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.projectName"
								inputAlign="right"
								border="none">
								</u--input> -->
							</u-form-item>
							<u-form-item
							label="甲方公司"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.firstCompany"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="甲方联系人"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.firstContacts"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="甲方联系方式"
							labelWidth="100"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.firstPhone"
								type="number"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item label="任务标题" required borderBottom>
								<u--text :text="info.taskName"></u--text>
								<!-- <u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.taskName"
								inputAlign="right"
								border="none"
								></u--input> -->
							</u-form-item>
							<u-form-item label="任务描述" required borderBottom>
								<u--text :text="info.describe?info.describe:''"></u--text>
								<!-- <u--textarea
								disabled
								disabledColor="#ffffff"
								v-model="info.describe">
								</u--textarea> -->
							</u-form-item>
							<!-- <u-form-item label="相关文件" borderBottom>
								<u-upload
								v-if="fileList.length>0"
								:fileList="fileList"
								name="2"
								multiple
								:maxCount="fileList.length"
								:deletable="false"
								accept="all">
								</u-upload>
								<u--text v-else text="无" align="right"></u--text>
							</u-form-item> -->
							<u-form-item
							label="任务开始时间"
							labelWidth="100"
							required
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.beginTime"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="任务结束时间"
							labelWidth="100"
							required
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.endTime"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="负责人"
							required
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.fzrName"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="参与人"
							borderBottom>
								<u--input
								v-if="cyrList.length<1"
								disabled
								disabledColor="#ffffff"
								placeholder="无"
								inputAlign="right"
								border="none">
								</u--input>
								<view v-else class="card-plus-t cc-t">
									<view class="pers-list" v-if="cyrList.length<4">
										<view class="per-list" v-for='(it,i) in cyrList' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="cyrList.length-1 > i">
												<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
									<view class="pers-list" v-else>
										<view class="per-list"
											@click="gotoPage('/components/choose-user/addMore?type=任务管家参与人&isEdit=0&chooseUsers='+JSON.stringify(cyrList))">
											<view style="text-align: -webkit-right;">
												<view class="pers-pic">
													<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
														<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
													</u-avatar>
												</view>
												<text class="pers-name all-users">查看全部</text>
											</view>
											<view class="pers-icon">
												<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
										<view class="per-list" v-for='(it,i) in cyrList.slice(-2)' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="cyrList.slice(-2).length-1 > i">
												<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
								</view>
							</u-form-item>
							<u-form-item
							label="完成审批人"
							required
							borderBottom>
								<view class="card-plus-t cc-t">
									<view class="pers-list" v-if="spList.length<4">
										<view class="per-list" v-for='(it,i) in spList' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="spList.length-1 > i">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
									<view class="pers-list" v-else>
										<view class="per-list"
											@click="gotoPage('/components/choose-user/addMore?type=任务管家审批人&isEdit=0&chooseUsers='+JSON.stringify(spList))">
											<view style="text-align: -webkit-right;">
												<view class="pers-pic">
													<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
														<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
													</u-avatar>
												</view>
											<text class="pers-name all-users">查看全部</text>
											</view>
											<view class="pers-icon">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
										<view class="per-list" v-for='(it,i) in spList.slice(-2)' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="spList.slice(-2).length-1 > i">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
								</view>
							</u-form-item>
							<u-form-item
							label="创建人"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								v-model="info.createBy"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
						</u--form>
						<uni-section title="流程" type="line" v-if="info.status == 0||info.status == 2">
							<view class="per-list">
								<view class="list_user">
									<view class="left">
										<u-avatar
											customStyle="width:100%;height:100%;"
											:text="info.rwUpdateBy.slice(1)"
											bgColor="#0087FC"
											shape="square"
											size="35"
											:fontSize="info.rwUpdateBy.length > 2?12:15">
										</u-avatar>
									</view>
									<view class="right">
										<view class="line1"><text>提交人</text></view>
										<view class="line2">
											<text>{{info.rwUpdateBy}}</text>
										</view>
									</view>
								</view>
								<view class="list_line"><view class="line"></view></view>
							</view>
							<view class="per-list">
								<view v-for="(item,index) in info.sprList">
									<view class="list_user">
										<view class="left">
											<u-avatar
												v-if="item.avatar"
												:src="item.avatar"
												customStyle="width:100%;height:100%;"
												shape="square"
												size="35">
											</u-avatar>
											<u-avatar
												v-else
												customStyle="width:100%;height:100%;"
												:text="item.userName.slice(1)"
												bgColor="#0087FC"
												shape="square"
												size="35"
												:fontSize="item.userName.length > 2?12:15">
											</u-avatar>
											<view class="list_left_icon">
												<icon class="icon-box-img" type="waiting" size="15" color="#DD8E59" v-if="item.status == '0'"></icon>
												<icon class="icon-box-img" type="success" size="15" v-if="item.status == '1'"></icon>
												<icon class="icon-box-img" type="warn" size="15" v-if="item.status == '2'"></icon>
											</view>
										</view>
										<view class="right">
											<view class="line1"><text>审批人</text><text v-if="item.status=='1'||item.status=='2'">{{item.updateTime}}</text></view>
											<view class="line2">
												<text>{{item.userName+(item.status == '2'?'(已拒绝)':'')}}</text>
											</view>
										</view>
									</view>
									<view class="list_user" v-if="item.status == '2'">
										<view class="left"></view>
										<view class="right">
											<!-- 拒绝理由 -->
											<view class="line3">
												<text>{{item.opinion}}</text>
											</view>
										</view>
									</view>
						
									<view class="list_line" v-if="index != info.sprList.length-1"><view class="line"></view></view>
								</view>
							</view>
						</uni-section>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 任务提示 -->
		<view class="taskTips">
			<view class="content">
				<scroll-view class="msg-list" scroll-y="true" :scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" :scroll-into-view="scrollToView" @scrolltoupper="loadHistory" upper-threshold="50">
					<!-- 加载历史数据waitingUI -->
					<view class="loading" v-if="loadShow">
						<view class="spinner">
							<view class="rect1"></view>
							<view class="rect2"></view>
							<view class="rect3"></view>
							<view class="rect4"></view>
							<view class="rect5"></view>
						</view>
					</view>
					<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.id">
						<!-- 系统消息 -->
						<block v-if="row.type=='system'" >
							<view class="system">
								<!-- 文字消息 -->
								<view v-if="row.msgType=='text'" class="text">
									{{row.content}}
								</view>
							</view>
						</block>
						<!-- 用户消息 -->
						<block v-if="row.type=='user'">
							<!-- 自己发出的消息 -->
							<view class="my" v-if="row.userId==myuid">
								<!-- 左-消息 -->
								<view class="left">
									<view class="username">
										<view class="name">{{row.userName}}</view> <view class="time">{{row.createTime}}</view>
									</view>
									<br/>
									<!-- 文字消息 -->
									<view v-if="row.msgType=='text'" class="bubble">
										<rich-text :nodes="row.content"></rich-text>
									</view>
									<!-- 语言消息 -->
									<view v-if="row.msgType=='voice'" class="bubble voice" @tap="playVoice(row)" :class="playMsgid == row.id?'play':''">
										<view class="length">{{row.length}}</view>
										<view class="icon my-voice"></view>
									</view>
									<!-- 图片消息 -->
									<view v-if="row.msgType=='img'" class="bubble img" @tap="showPic(row)">
										<image :src="row.content" :style="{'width': row.width+'px','height': row.height+'px'}"></image>
									</view>
									
								</view>
								<!-- 右-头像 -->
								<view class="right">
									<image :src="row.avatar" v-if="row.avatar"></image>
									<u-avatar
										v-else
										customStyle="width:100%;height:100%;"
										:text="row.userName.slice(1)"
										bgColor="#0087FC"
										shape="square"
										size="35"
										:fontSize="row.userName.length > 2?13:16">
									</u-avatar>
								</view>
							</view>
							<!-- 别人发出的消息 -->
							<view class="other" v-if="row.userId!=myuid">
								<!-- 左-头像 -->
								<view class="left">
									<image :src="row.avatar" v-if="row.avatar"></image>
									<u-avatar
										v-else
										customStyle="width:100%;height:100%;"
										:text="row.userName.slice(1)"
										bgColor="#0087FC"
										shape="square"
										size="35"
										:fontSize="row.userName.length > 2?13:16">
									</u-avatar>
								</view>
								<!-- 右-用户名称-时间-消息 -->
								<view class="right">
									<view class="username">
										<view class="name">{{row.userName}}</view> <view class="time">{{row.createTime}}</view>
									</view>
									<!-- 文字消息 -->
									<view v-if="row.msgType=='text'" class="bubble">
										<rich-text :nodes="row.content"></rich-text>
									</view>
									<!-- 语音消息 -->
									<view v-if="row.msgType=='voice'" class="bubble voice" @tap="playVoice(row)" :class="playMsgid == row.id?'play':''">
										<view class="icon other-voice"></view>
										<view class="length">{{row.length}}</view>
									</view>
									<!-- 图片消息 -->
									<view v-if="row.msgType=='img'" class="bubble img" @tap="showPic(row)">
										<image :src="row.content" :style="{'width': row.width+'px','height': row.height+'px'}"></image>
									</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="submit-button" v-if="info.status == 0&&spType == '审批'">
			<view class="submit-block">
				<view class="submit-block_item_sp" @click="sheetSpShow = true">审批任务</view>
				<view class="submit-block_item_sp" @click="gotoPage('/subPackTask/taskButler/totalTask/edit?id='+info.id)">编辑任务</view>
			</view>
		</view>
		<view class="submit-button" v-if="(info.status!=0||info.taskStatus == 0)&&spType == '用户'">
			<view class="submit-block">
				<view class="submit-block_item" @click="doComplete()" v-if="info.status != '1'&&info.status != '0'">完成任务</view>
				<view class="submit-block_item" @click="revokeComplete()" v-if="info.status == '0'">撤销完成</view>
				<view class="submit-block_item" @click="doAction" v-if="info.status != '1'">操作</view>
			</view>
		</view>
		<view class="qz">
			<span v-if="info.status == 0"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/447e42ce5d85454f9f458dc18d522bec.png" /></span>
			<span v-if="info.status == 1"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/49d884b6a24c4f9cb645b551a974dec3.png" /></span>
			<span v-if="info.status == 2"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/a2ef1372c79d42aeb3adec735fd6826e.png" /></span>
			<span v-if="info.status == 3"><image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/87530e13f0954b08b12f43b8998a6e14.png" /></span>
		</view>
		<u-action-sheet title="操作" round="20" :actions="list" :show="sheetShow" @close="sheetShow = false" @select="sheetSelect"></u-action-sheet>
		<u-action-sheet title="操作" round="20" :actions="listSp" :show="sheetSpShow" @close="sheetSpShow = false" @select="sheetSpSelect"></u-action-sheet>
	</view>
</template>

<script>
	import { get,completeTask,revokeTask,del } from '@/api/task.js'
	export default {
		data() {
			return {
				tashId:undefined,
				postNames:[],
				info:{},
				fileList:[],
				type:'',
				spType:'',
				cyrList:[],
				sprList:[],
				spList:[],
				list: [
					{
						name: '任务反馈',
					},
					{
						name: '编辑任务',
					},
					{
						name: '删除任务',
					}
				],
				listSp: [
					{
						name: '同意',
					},
					{
						name: '拒绝',
					},
				],
				sheetShow: false,
				sheetSpShow: false,
				// 任务反馈
				msgList:[],
				myuid:0,
				czId:''
			}
		},
		onLoad(option) {
			this.postNames = uni.getStorageSync("loginInfo").postNames
			this.myuid = uni.getStorageSync("loginInfo").user.userId
			this.spType = option.spType
			this.type = option.type
			this.tashId = option.id
			this.czId = option.id
			// this.getInfo(option.id)
		},
		onShow() {
			this.getInfo(this.tashId)
		},
		methods: {
			// 预览图片
			showPic(msg){
				uni.previewImage({
					indicator:"none",
					current:0,
					urls: [msg.content]
				});
			},
			doAction(){
				if(this.info.status == '0'){
					uni.showToast({ title: '任务审批中无法操作', icon: 'none' })
					return
				}
				this.sheetShow = true
			},
			sheetSpSelect(e){
				if(e.name == '同意'){
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=1&type='+this.type+'&tbId='+this.info.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
            		eventChannel.emit('refreshPage', data);
							}
						}
					});
				}else if(e.name == '拒绝'){
					uni.navigateTo({
						url: '/subPackTask/work/cy/mysp/opinion?status=2&type='+this.type+'&tbId='+this.info.id+'&czId='+this.czId,
						events: {
							refreshPage: (data) => {
								this.$emit('refreshPage', data);
								// 触发传递给列表页的事件
								const eventChannel = this.getOpenerEventChannel();
            		eventChannel.emit('refreshPage', data);
							}
						}
					});
				}
			},
			sheetSelect(e){
				if(e.name == '删除任务'){
					if(this.postNames.indexOf('总经理')<0&&this.postNames.indexOf('副总经理')<0&&this.postNames.indexOf('生产经理')<0){
						uni.showToast({ title: '您没有操作权限', icon: 'none' })
						return
					}
					let that_ = this
					uni.showModal({
						title: "是否确定？",
						content: "是否确定删除任务",
						confirmText: '是',
						cancelText: '否',
						success:  res => {
							if (res.confirm){
								that_.delTask(that_.info.id)
								uni.navigateBack()
							}
						}
					})
				}else if(e.name == '编辑任务'){
					this.gotoPage('/subPackTask/taskButler/totalTask/edit?id='+this.info.id)
				}else if(e.name == '任务反馈'){
					if(this.info.taskStatus == '2'||this.info.taskStatus == '3'){
						uni.showToast({ title: '任务已完成无需反馈', icon: 'none' })
						return
					}
					this.feedback()
				}
			},
			async delTask(id){
				const { data } = await del(id);
				if(data.code == 200){
					this.getList()
					uni.showToast({ title: '任务删除成功', icon: 'none' })
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			async getInfo(id){
				const { data } = await get({id:id});
				if(data.code == 200){
					this.info = data.data
					this.cyrList = data.data.cyrList
					this.sprList = data.data.sprList
					this.spList = data.data.spList
					this.info.fileList.forEach(e=>{
						this.fileList.push({url:e.url})
					})
					console.log(this.info);
					console.log('任务图片：',data.data.zxchTaskLogList);
					this.msgList = data.data.zxchTaskLogList
					// 获取消息中的图片,并处理显示尺寸
					for(let i=0;i<this.msgList.length;i++){
						if(this.msgList[i].type=='user'&&this.msgList[i].msgType=="img"){
							this.msgList[i] = this.setPicSize(this.msgList[i]);
						}
					}
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize(content){
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
				let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
				let maxH = uni.upx2px(350);//350是定义消息图片最大高度
				if(content.width>maxW||content.height>maxH){
					let scale = content.width/content.height;
					content.width = scale>1?maxW:maxH*scale;
					content.height = scale>1?maxW/scale:maxH;
				}
				return content;
			},
			async complete(){
				const { data } = await completeTask(this.info.id);
				if(data.code == 200){
					this.getInfo(this.info.id)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			async revoke(){
				const { data } = await revokeTask(this.info.id);
				if(data.code == 200){
					this.getInfo(this.info.id)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			doComplete(){
				uni.showModal({
					title: "是否确定？",
					content: "是否确定完成任务",
					confirmText: '是',
					cancelText: '否',
					success:  res => {
						if (res.confirm){
							this.complete()
						}
					}
				})
			},
			revokeComplete(){
				uni.showModal({
					title: "是否确定？",
					content: "是否确定撤销完成",
					confirmText: '是',
					cancelText: '否',
					success:  res => {
						if (res.confirm){
							this.revoke()
						}
					}
				})
			},
			feedback(){
				if(this.info.status == '0'){
					uni.showToast({ title: '任务审核中无法反馈', icon: 'none' })
					return
				}
				this.gotoPage('/subPackTask/taskButler/totalTask/feedback?taskId='+this.info.id)
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/HM-chat/css/style.scss"; 
	.content .msg-list {
	    width: 96%;
	    padding: 0 2%;
		position: unset;
	}
	.content .msg-list  {
		margin-top: 0;
	}
	.content  {
		background-color: #e5e5e5;
		min-height: auto;
		padding-bottom: 10vh;
	}
	.taskTips {
		touch-action: none;
	}
</style>
<style>
	.card-plus-t {
		display: flex;
		flex-direction: row-reverse;
		justify-content: right;
		text-align: center;
		width: 100%;
	}
	.cc-t {
		margin: 5rpx;
	}
	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		/* margin-bottom: 40rpx; */
		position: relative;
		height: 45rpx;
		border-radius: 15rpx;
	}
	.pers-list {
		display: flex;
		flex-direction: row;
		justify-content: right;
	}
	.per-list {
		position: relative;
		margin-right: 40rpx;
	}
	/* .pers-pic {
		display: inline-block;
	} */
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
	}
	.pers-icon {
		display: inline-block;
		position: absolute;
		top: 50%;
		right: -20rpx;
		transform: translate(50%,-100%);
	}
	.user-t {
		margin: 5rpx;
	}
	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;
	}
	.list_user {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	.list_user .left {
		position: relative;
		width: 10%;
		font-size: 1em !important;
	}
	.list_user .right {
		width: 85%;
	}
	.list_left_icon {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.list_user .right .line1 {
		display: flex;
		justify-content: space-between;
		color: #999;
	}
	.list_user .right .line2 {
		color: #666;
	}
	.list_user .right .line3 {
		padding: 10rpx;
		background-color: #d4d4d4;
		border-radius: 0 10rpx 10rpx 10rpx;
		line-height: 2;
		color: #666;
		font-size: 25rpx;
	}
	.list_line {
		width: 10%;
		text-align: center;
	}
	.list_line .line {
		display: inline-block;
		vertical-align: middle;
		height: 60rpx;
		border-left: 6rpx solid #aaa;
		border-radius: 5rpx;
	}
	.submit-block_item {
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		width: 50%;
		background-color: #0087FC;
	}
	.submit-block_item:nth-child(1) {
		border-right: 2rpx solid #fff;
	}
	/* .submit-block_item:nth-child(2) {
		background-color: #B86F73;
	}
	.submit-block_item:nth-child(2) {
		border-right: 2rpx solid #fff;
	} */
	.submit-block_item:nth-child(2) {
		background-color: #9a9d9f;
	}
	
	.submit-block_item_sp{
		box-sizing: border-box;
		vertical-align: middle;
		display: inline-block;
		width: 50%;
		background-color: #0087FC;
	}
	.submit-block_item_sp:nth-child(1) {
		border-right: 2rpx solid #fff;
	}
	.submit-block_item_sp:nth-child(2) {
		background-color: #9a9d9f;
	}
	
	
	.submit-button .submit-block {
		background-color: #fff;
	}
	
	.qz {
	  position: absolute;
	  right: 80rpx;
	  top: 40rpx;
	}
	.qz image {
	  width: 150rpx;
	  height: 150rpx;
	}
	.all-users {
		position: relative;
		left: 10%;
	}
</style>
